<template>


  <div style="width: 1250px;margin: 0 auto;">
    <swiper 
      :watchSlidesProgress= true
    slidesPerView= "auto"
    :centeredSlides= true
    :loop= true
    :loopedSlides= 5
    :autoplay= true
    :navigation="true"
    :modules="modules"
      >
    <swiper-slide v-for="(rs,index) in banner" :key="index" class="swiper-slide">
      <img :src="rs" />
    </swiper-slide>
  </swiper>
  </div>
  
  
  
  
  </template>
  
  
  <script setup>
  import { ref, onMounted, onUnmounted, nextTick, watch } from 'vue'
  // 轮播图插件
  import "swiper/css";
  import "swiper/css/free-mode";
  import "swiper/css/navigation";
  import "swiper/css/pagination";
  import "swiper/css/thumbs";
  import "swiper/css/effect-cards";
  import { Swiper, SwiperSlide } from 'swiper/vue';
  import { Thumbs, Navigation, Autoplay, Zoom, FreeMode } from "swiper/modules";
  const modules = [Thumbs, Navigation, Autoplay, Zoom, FreeMode]; //必须要在这里面引入，只在组件定义的属性不生效，前面这里面没有定义autoPlay导致我的组件轮播不了，一度以为是swiper没有支持缩略图轮播
  const {banner} = defineProps({
      banner: {
          type: Array,
          default: () => [
      "https://admin.hqx.com.cn/Public/Uploads/Group/2021-11-26/61a038df800ff.png",
      "https://admin.hqx.com.cn/Public/Uploads/Group/2021-11-26/61a038df82418.png",
      "https://admin.hqx.com.cn/Public/Uploads/Group/2021-11-26/61a038df8349d.png",
      "https://admin.hqx.com.cn/Public/Uploads/Group/2021-11-26/61a038df8433d.png",
      ]
      }
  }) 
  
  
  
  
  
  </script>
  
  <style scoped>
  
  </style>